<!--  -->
<template>
  <div class="wrap">
    <div class="circle" v-for="(item, index) in Department" :key="item.ID" :class="{ [item.status]: true }"
      :style="{ top: item.position.top, left: item.position.left, animationDuration: item.ani.dur, animationDelay: item.ani.delay }">
      <div class="Count">
        <span class="OnlineCount">{{ item.OnlineCount }}</span> / <span>{{ item.OnlineCount + item.OffLineCount }}</span>
      </div>
      <div class="Name">
        {{ item.Name }}
      </div>
    </div>
  </div>
</template>

<script>
import { connrequest2 } from "@/api/firstPage.js"
import { parseTime } from "@/utils/index.js";
export default {
  data() {
    return {
      Department: [],
      positionStatus: [
        {
          position: { top: '17%', left: '45%' },
          status: 'inactive'
        },
        {
          position: { top: '30%', left: '34%' },
          status: 'active'
        },
        {
          position: { top: '38%', left: '18%' },
          status: 'inactive'
        },
        {
          position: { top: '44%', left: '58%' },
          status: 'active'
        },
        {
          position: { top: '40%', left: '72%' },
          status: 'inactive'
        },
        {
          position: { top: '65%', left: '12%' },
          status: 'active'
        },
        {
          position: { top: '58%', left: '31%' },
          status: 'inactive'
        },
        {
          position: { top: '59%', left: '51%' },
          status: 'active'
        },
        {
          position: { top: '60%', left: '70%' },
          status: 'inactive'
        },
        {
          position: { top: '70%', left: '82%' },
          status: 'active'
        },
        {
          position: { top: '80%', left: '72%' },
          status: 'inactive'
        },
        {
          position: { top: '74%', left: '40%' },
          status: 'active'
        },
        {
          position: { top: '72%', left: '23%' },
          status: 'inactive'
        },
        {
          position: { top: '23%', left: '60%' },
          status: 'active'
        },
        {
          position: { top: '78%', left: '60%' },
          status: 'inactive'
        },
        {
          position: { top: '60%', left: '40%' },
          status: 'inactive'
        },
      ],
      aniCfg: []
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.initData()
  },
  methods: {
    async initData(searchobj = {}) {
      let arr = this.positionStatus
      const res = await connrequest2('GetDepartmentDeviceSumTree')
      
      res.Data.Department = res.Data.Department.map((item, index) => {
        const position = arr[index] ? arr[index].position : { top: '0%', left: '0%' };
        const status = arr[index] ? arr[index].status : 'inactive';

        if (!this.aniCfg[index]) {
          this.aniCfg.push({
            delay: `${Math.random() * 3}s`,
            dur: `${4 + Math.random() * 2}s`
          })
        }

        return {
          ...item, // 保留原对象的所有属性
          position, // 添加 position 属性
          status, // 添加 status 属性
          ani: this.aniCfg[index]
        };
      })
      this.Department = res.Data.Department
    },
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.wrap {
  position: relative;
  height: 70%;
  background: url('../../../assets/aiScreen/zhihuishu@2x.png') no-repeat center center;
  background-size: contain;
  background-position: 65%;
  border: 2px solid #123150;
}

.wrap::after {
  content: '';
  position: absolute;
  bottom: -11px;
  right: -11px;
  width: 20px;
  height: 20px;
  background: #031d31;
  border-top: 2px solid #123150;
  transform: rotate(-48deg);
}

.wrap::before {
  content: '';
  position: absolute;
  bottom: -11px;
  left: -11px;
  width: 20px;
  height: 20px;
  background: #031d31;
  border-top: 2px solid #123150;
  transform: rotate(48deg);
}

/* 圆形元素 */
.circle {
  position: absolute;
  /* 绝对定位 */
  width: 80px;
  /* 圆形直径 */
  height: 80px;
  /* 圆形直径 */
  border-radius: 50%;
  /* 圆形 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  /* 文字颜色 */
  font-size: 14px;
  /* 字体大小 */
  text-align: center;
  transition: background-color 0.3s;
  /* 背景颜色平滑过渡 */

  animation: float-item 4s ease-in-out infinite;
}

/* 根据状态设置背景颜色 */
.circle.active {
  background: radial-gradient(circle at center, #000000 -100%, #0f7a75 100%);
}

.circle.active::after {
  content: '';
  position: absolute;
  top: -5px;
  /* 外圈直径 90px，偏移 (90-80)/2 = 5px */
  left: -5px;
  width: 90px;
  /* 80px + 5px 间隔 × 2 */
  height: 90px;
  border: 1px solid #0f7a75;
  /* 外圈颜色与渐变边缘一致 */
  border-radius: 50%;
  opacity: .5;
  animation: light-circle linear 1.2s infinite both;
}

.circle.inactive {
  background: radial-gradient(circle at center, #000000 -100%, #106fa9 100%);
}

.circle.inactive::after {
  content: '';
  position: absolute;
  top: -5px;
  /* 外圈直径 90px，偏移 (90-80)/2 = 5px */
  left: -5px;
  width: 90px;
  /* 80px + 5px 间隔 × 2 */
  height: 90px;
  border: 1px solid #106fa9;
  /* 外圈颜色与渐变边缘一致 */
  border-radius: 50%;
  opacity: .5;
  animation: light-circle linear 1.2s infinite both;
}

.circle.active::before,
.circle.inactive::before {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70px 70px;
  animation: rotate linear 2s infinite both;
}
.circle.active::before {
  background-image: url('../../../assets/aiScreen/circleG.png');
}
.circle.inactive::before {
  background-image: url('../../../assets/aiScreen/circleB.png');
}



.circle {
  .Count {
    font-size: 18px;
    color: #FFFFFF;
    font-weight: blod;

    .OnlineCount {
      color: #3AF5D0;
    }
  }

  .Name {
    color: #aabfbe;
    font-size: 13px;
  }
}</style>